KnockoutJS একটি শক্তিশালী JavaScript লাইব্রেরি যা Model-View-ViewModel (MVVM) আর্কিটেকচার অনুসরণ করে এবং data binding এর মাধ্যমে UI এবং ডেটার মধ্যে স্বয়ংক্রিয়ভাবে যোগাযোগ প্রতিষ্ঠা করে। KnockoutJS তে Checkbox, Radio Button, এবং Select Option এর মত HTML ইন্টারঅ্যাকশন উপাদানগুলির সাথে সহজে two-way data binding বাস্তবায়ন করা যায়।
1. Checkbox Binding in KnockoutJS
Checkbox এর সাথে two-way data binding করতে KnockoutJS আপনাকে checked binding ব্যবহার করতে দেয়, যাতে আপনি checkbox এর নির্বাচিত (checked) বা অ-নির্বাচিত (unchecked) অবস্থার সাথে observable ডেটা সংযুক্ত করতে পারেন।
Example: Checkbox Binding
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KnockoutJS Checkbox Binding</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>
</head>
<body>
<label>
<input type="checkbox" data-bind="checked: isSubscribed" />
Subscribe to newsletter
</label>
<p>Your subscription status: <span data-bind="text: isSubscribed() ? 'Subscribed' : 'Not Subscribed'"></span></p>
<script>
function AppViewModel() {
this.isSubscribed = ko.observable(false); // Default value is false
}
// Activating KnockoutJS bindings
ko.applyBindings(new AppViewModel());
</script>
</body>
</html>
Explanation:
- এখানে
isSubscribedএকটি observable ডেটা যা checkbox এর সাথে two-way binding এ যুক্ত। - যখন ইউজার চেকবক্সে টিক মারবে বা তুলে নেবে, তখন
isSubscribedএর মান স্বয়ংক্রিয়ভাবে পরিবর্তিত হবে এবং UI তে "Subscribed" বা "Not Subscribed" দেখাবে।
2. Radio Button Binding in KnockoutJS
Radio Buttons এর জন্যও two-way data binding করতে KnockoutJS আপনাকে checked binding ব্যবহার করতে দেয়, তবে এখানে আপনি একটি গ্রুপের মধ্যে একই ভ্যালু চয়ন করতে পারেন। একাধিক রেডিও বাটনের মধ্যে, আপনি কেবল একটি বাটন চয়ন করতে পারবেন, এবং এটি observable ডেটার সাথে সিঙ্ক্রোনাইজড থাকবে।
Example: Radio Button Binding
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KnockoutJS Radio Button Binding</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>
</head>
<body>
<label>
<input type="radio" name="gender" value="Male" data-bind="checked: gender" />
Male
</label>
<label>
<input type="radio" name="gender" value="Female" data-bind="checked: gender" />
Female
</label>
<p>Your gender: <span data-bind="text: gender"></span></p>
<script>
function AppViewModel() {
this.gender = ko.observable("Male"); // Default value is "Male"
}
// Activating KnockoutJS bindings
ko.applyBindings(new AppViewModel());
</script>
</body>
</html>
Explanation:
- এখানে,
genderএকটি observable যা Radio Buttons এর সাথে two-way binding এ যুক্ত। যখন ইউজার একটি রেডিও বাটন নির্বাচন করবে, তখনgenderএর মান আপডেট হবে এবং UI তে সেই মান প্রতিফলিত হবে।
3. Select Option Binding in KnockoutJS
Select Option এর জন্য KnockoutJS তে value binding ব্যবহার করা হয়। এটি one-way বা two-way data binding জন্য ব্যবহৃত হতে পারে, যেখানে আপনি একটি ড্রপডাউন লিস্টের সাথে observable ডেটাকে সংযুক্ত করবেন।
Example: Select Option Binding
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KnockoutJS Select Option Binding</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>
</head>
<body>
<label for="car">Choose a car:</label>
<select id="car" data-bind="value: selectedCar, options: cars, optionsText: 'name', optionsValue: 'id'">
</select>
<p>Your selected car: <span data-bind="text: selectedCar"></span></p>
<script>
function AppViewModel() {
this.cars = ko.observableArray([
{ id: 1, name: "Ford" },
{ id: 2, name: "Chevrolet" },
{ id: 3, name: "Toyota" }
]);
this.selectedCar = ko.observable(); // No car selected initially
}
// Activating KnockoutJS bindings
ko.applyBindings(new AppViewModel());
</script>
</body>
</html>
Explanation:
optionsbinding ব্যবহার করে, আপনি একটি array ডেটা (cars) ড্রপডাউন লিস্টে প্রদর্শন করতে পারেন।optionsTextএবংoptionsValueপ্রোপার্টি দিয়ে আপনি প্রতিটি অপশন উপাদানটির টেক্সট এবং ভ্যালু কাস্টমাইজ করতে পারেন।selectedCarএকটি observable ডেটা, যা ড্রপডাউন থেকে নির্বাচিত মান সংরক্ষণ করে। যখন ইউজার একটি অপশন নির্বাচন করবে, তখন selectedCar এর মান আপডেট হবে এবং UI তে এটি দেখাবে।
KnockoutJS তে Select Option এর অন্যান্য বৈশিষ্ট্য:
optionsCaption:- আপনি একটি ডিফল্ট ক্যাপশন প্রদর্শন করতে পারেন, যেমন "Please select..." বা "Choose a car"।
উদাহরণ:
<select data-bind="options: cars, value: selectedCar, optionsCaption: 'Please select a car...'"></select>
optionsValue:- ডিফল্টরূপে,
optionsValueপ্রোপার্টি ব্যবহার করে আপনি যেকোনো মান চয়ন করতে পারবেন যেটি ড্রপডাউন অপশনগুলির থেকে এসেছে। এটি ডিফল্টভাবেvalueএর মানের উপর নির্ভরশীল। উদাহরণ:
<select data-bind="options: cars, value: selectedCar, optionsValue: 'id'"></select>
- ডিফল্টরূপে,
KnockoutJS এর Checkbox, Radio Button, এবং Select Option এর সাথে data binding খুবই সহজ এবং কার্যকরী। এর মাধ্যমে আপনি two-way data binding তৈরি করতে পারেন, যেখানে UI পরিবর্তন হলে ডেটা আপডেট হয় এবং ডেটা পরিবর্তিত হলে UI আপডেট হয়। KnockoutJS এর মাধ্যমে MVVM (Model-View-ViewModel) আর্কিটেকচার অনুসরণ করা হয়, যা ওয়েব ডেভেলপমেন্টে ডেটা এবং UI এর মধ্যে শক্তিশালী এবং পরিষ্কার সম্পর্ক তৈরি করতে সাহায্য করে।
Read more
